<style lang="less">
@table-border: 1px solid #e8eaec;
@padding-top: 10px;
@padding-left: 50px;
.tree-table {
  width: 100%;
  border: @table-border;
  overflow: hidden;
  border-bottom: 1px solid transparent;
  .tree-table--header,
  .tree-table--footer {
    padding: @padding-top @padding-left;
    border-bottom: @table-border;
  }
  .tree-table__primary {
    background: #f3f3f3;
    color: #464c5b;
    font-weight: 500;
  }
  .tree-table__float {
    &:after,
    &:before {
      content: "";
      display: block;
      clear: both;
    }
    .tree-table__right {
      float: right;
    }
  }
  .ivu-poptip {
    width: 100%;
    cursor: pointer;
    .ivu-poptip-rel {
      width: 100%;
    }
  }
  .tree-table--tree {
    padding: 0 @padding-left;
  }
  .ivu-tree ul li {
    margin: 0;
  }
  .ivu-tree-children {
    p:hover {
      color: rgb(45, 140, 240);
    }
  }
}
</style>

<template>
  <div class="tree-table"
       ref="treeTable">
    <header class="tree-table--header tree-table__primary tree-table__float">
      <div class="tree-table__right">金额</div>
      <div>营业额</div>
    </header>
    <Tree class="tree-table--tree"
          :data="data"
          :render="renderContent"></Tree>
    <Poptip trigger="hover"
            content="收款合计=营收小计+营业外小计+今日另收-团购兑换-新项目售币额">
      <footer class="tree-table--footer tree-table__primary tree-table__float">
        <div class="tree-table__right">{{ total?total:"0.00" }}</div>
        <div>收款合计</div>
      </footer>
    </Poptip>
  </div>
</template>
<script>
export default {
  name: 'TreeTable',
  props: {
    data: Array,
    total: String,
    shopId: String,
    dateTime: String
  },
  data () {
    return {
      width: '',
      offsetLeft: 0
    }
  },
  mounted () {
    this.$nextTick(() => {
      const treeTable = this.$refs.treeTable
      this.width = this.getStyle(this.$refs.treeTable, 'width')
      this.offsetLeft = treeTable.offsetLeft
    })
  },
  methods: {
    renderContent (h, { root, node, data }) {
      return h('p', {
        style: {
          display: 'inline-block',
          width: '100%',
          padding: '10px 0'
        }
      }, [
        h('span', data.categoryName !== null ? data.categoryName : '-'),
        h('span', {
          style: {
            display: 'inline-block',
            float: 'right',
            marginRight: '16px',
            textDecoration: data.wechatMall ? 'underline' : 'none',
            cursor: data.wechatMall ? 'pointer' : 'default',
            color: data.wechatMall ? '#2d8cf0' : ''
          },
          on: {
            click: () => { this.goHtmlUrl(root, node, data) }
          }
        }, data.revenue),
        h('span', {
          style: {
            display: 'block',
            width: `${parseInt(this.width) + this.offsetLeft}px`,
            height: '1px',
            background: '#E8EAEC',
            position: 'relative',
            bottom: '-10px',
            left: `-${this.offsetLeft}px`
          }
        })
      ])
    },

    getStyle (obj, styleName) {
      if (obj.currentStyle) {
        return obj.currentStyle[styleName]
      } else {
        return getComputedStyle(obj, null)[styleName]
      }
    },

    goHtmlUrl (root, node, data) {
      if (data.wechatMall) {
        this.$router.push({
          name: 'report_finance_dailyanalytics_wxdetail',
          params: { dateTime: this.dateTime, shopId: this.shopId }
        })
      }
    }
  }
}
</script>
